<template>
  <el-container class="home-container">
    <el-header>
      <div>
        <img style="margin-left: 66px" src="../assets/img/logo.jpg"/>
        <span style="margin-left: 90px">蜗牛养老管理系统</span>
<!--        <span style="margin-left: 680px" class="gradient-text">欢迎━(*｀∀´*)ノ亻! :</span> -->
<!--        <span-->
<!--          style="color: gold;margin-right: 80px">{{ $store.state.username }}</span>-->
      </div>
      <el-button type="info" @click="logout">退出</el-button>
    </el-header>
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <div class="toggle-button" @click="toggleClapse"><span style="font-size: 20px;color: #1fddff">☆</span></div>
        <el-menu
            background-color="rgb(31,31,31)"
            text-color="rgb(191,187,187)"
            active-text-color="#1fddff"
            router
            unique-opened
            :collapse="isCollapse"
            :collapse-transition="false"
        >
          <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item
                :index="subMenu.url+''"
                v-for="subMenu in item.children"
                :key="subMenu.id"
            >
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{ subMenu.name }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view v-if="isRouterAlive"/>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import ExitRegister from "@/components/customer/ExitRegister.vue";
import ChangeBed from "@/components/customer/ChangeBed.vue";

export default {
  data() {
    return {
      userName: '',
      menuList: [
        {
          id: 1,
          name: "客户管理",
          children: [
            {id: 1, name: "长者档案", url: "/Older"},
            {id: 2, name: "咨询接待", url: "/Consulter"},
            {id: 3, name: "外出申请", url: "/OutApplication"},
            {id: 4, name: "合同模板", url: "/Contract"},
            {id: 5, name: "生活记录", url: "/Life"},
            {id: 6, name: "长者标签", url: "/Label"},
            {id: 7, name: "用电管理", url: "/Electricity"},
            {id: 8, name: "出院登记", url: "/ExitRegister"},
            {id: 9, name: "床位动态", url: "/BedDynamic"},
            {id: 10, name: "更改床位", url: "/ChangeBed"},
            {id: 11, name: "更换护理级别", url: "/ChangeCare"},
          ]
        },
        {
          id: 3,
          name: "点餐管理",
          children: [
            {id: 1, name: "食物管理", url: "/Food"},
            {id: 2, name: "食谱管理", url: "/Recipe"},
          ]
        },
        {
          id: 4,
          name: "药品管理",
          children: [{id: 41, name: "药品信息", url: "/Medicine"},
            {id: 42, name: "出库账单", url: "/DeliveryBill"},
            {id: 43, name: "药品出库单", url: "/Delivery"},
            {id: 44, name: "药品入库单", url: "/Warehouse"},
            {id: 45, name: "过期出库单", url: "/Overdue"},]

        },

        {
          id: 6,
          name: "健康管理",
          children: [
            {id: 7, name: "采集健康信息", url: "/CollectAll"},
            {id: 8, name: "身高信息", url: "/Height"},
            {id: 9, name: "体重信息", url: "/Weight"},
            {id: 10, name: "血糖信息", url: "/Glu"},
            {id: 11, name: "心率信息", url: "/Hr"},
            {id: 12, name: "体温信息", url: "/Temp"},
            {id: 13, name: "脉搏信息", url: "/Pulse"},
            {id: 14, name: "血压信息", url: "/Bp"},
          ]
        },
        {
          id: 15,
          name: "一卡通管理",
          children: [
            {id: 16, name: "长者IC卡", url: "/Card"},
            {id: 17, name: "充值记录表", url: "/Record"},
          ]
        },
        {
          id: 8,
          name: "财务管理",
          children: [
            {id: 9, name: "费用类目", url: "/Cost"},
            {id: 10, name: "其他收付款", url: "/OtherCost"},
            {id: 11, name: "出院结算", url: "/DischargeSettlement"},
            {id: 12, name: "入住缴费", url: "/OccupancyFee"}
          ]
        },
        {
          id: 18,
          name: "床位管理",
          children: [
            {id: 19, name: "房间类型设置", url: "/RoomType"},
            {id: 20, name: "床位设置", url: "/BedSite"},
          ]
        },
        {
          id: 46,
          name: "照料服务",
          children: [{id: 47, name: "服务项目", url: "/Careproject"},
            {id: 48, name: "护理级别", url: "/CareLevel"},]
          /*{id: 49, name: "测试~护理级别", url: "/aaa"},*/

        },
        {
          id: 21,
          name: "数据汇总",
          children: [
            {id: 22, name: "长者档案汇总", url: "/OlderData"},
            {id: 23, name: "IC卡汇总", url: "/CardData"},
            {id: 24, name: "出院结算汇总", url: "/OccupancyFeeData"},
          ]
        },

      ],
      isCollapse: false,
      isRouterAlive: true
    };
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },
    toggleClapse() {
      this.isCollapse = !this.isCollapse;
    },
    logout() {
      window.sessionStorage.clear();
      this.$router.push("/");
    },
    loadMenus() {

    }
  },
  created() {

  }
};
</script>
<style lang="less">
.el-submenu__title:hover {
  background-color: black !important;
  color: rgba(255, 255, 255) !important;
}

.el-menu-item:hover {
  background-color: black !important;
  color: rgba(255, 255, 255) !important;
}

.gradient-text {
  background: linear-gradient(to right, #ff4b1f, #1fddff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-animation 5s ease-in-out infinite alternate;
}

/* 创建一个动画 */
@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

img {
  width: 30px;
  height: 30px;
}

.toggle-button {
  background-color: rgb(31, 31, 31);
  font-size: 10px;
  text-align: center;
  color: #fff;
  letter-spacing: 0.2em;
  cursor: pointer;
}

.el-header {
  background-color: rgb(31, 31, 31);
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #c0c4cc;
  font-size: 22px;

  > div {
    display: flex;
    align-items: center;

    span {
      margin-left: 14px;
    }
  }
}

.el-aside {
  background-color: rgb(31, 31, 31);
}

.el-main {
  background-color: #eaedf1;
}

.home-container {
  height: 100%;
}
</style>
